<template>
	<view>
		<view class="wrap">
		    <view class="tabs-view">
		        <u-tabs active-color="#ff5000" :list="tabsList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		    </view>
		    <view class="swiper-box">
                <mescroll-body ref="mescrollRef" top="80" auto="false" :down="down"  @init="mescrollInit" @down="downCallback" @up="upCallback">
                    <!-- 待评价列表 -->
                    <view class="order-list-view" v-if="current == 0" v-for="(order, index) in orderList" :Key="index">
                        <view class="order-header" >
                            <view class="order-sn" @click="onSellerDetail(order.seller_id,order.seller_name)">
                                <view class="seller-name u-flex">
                                    <view class="u-margin-left-10">订单号: {{order.sn}}</view>
                                </view>
                            </view>
                            <view class="order-status" >{{order.order_type === 'PINTUAN' ? order.ping_tuan_status : order.order_status_text}}</view>
                        </view>
                        <view class="goods-list-view" v-for="(sku,skuIndex) in order.sku_list">
                            <goods-info
                                :goodsName="sku.name"
                                :goodsNum="sku.num"
                                :goodsImg="sku.goods_image"
                                :goodsSpecList="sku.spec_list"
                                :goodsType="order.order_type"
                            >
                            </goods-info>
                        </view>
                        <view class="order-footer u-flex u-row-right">
                            <!-- <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle" v-if="order.order_operate_allowable_vo.allow_check_express" @click="onExpress(order.sn)">查看物流</u-button> -->
                            <u-button size="mini" shape="circle" type="error" :plain="true" :custom-style="customStyle" v-if="order.order_operate_allowable_vo.allow_comment" @click="onComment(order.sn,order.sku_list)">评价</u-button>
                        </view>
                    </view>

                    <!-- 待追评 和 已评价 列表 -->
                    <view class="order-list-view" v-if="current != 0" v-for="(order, eindex) in orderList" :Key="eindex">
                        <view class="order-header" >
                            <view class="order-sn">
                                <view class="seller-name u-flex">
                                    <view class="u-margin-left-10">订单号: {{order.order_sn}}</view>
                                </view>
                            </view>
                            <view v-if="order.audit_status" class="order-status">
                                <text style="color: #ff5000;" v-if="order.additional_comment">{{ order.additional_comment.audit_status | auditStatus }}</text>
                                <text style="color: #ff5000;" v-else>{{ order.audit_status | auditStatus }}</text>
                            </view>
                        </view>
                        <view class="goods-list-view">
                            <goods-info
                                :goodsName="order.goods_name"
                                :goodsImg="order.goods_img"
                            >
                            </goods-info>
                        </view>
                        <view class="order-footer u-flex u-row-right">
                            <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle" v-if="current == 1"  @click="addEvaluation(order)">追加评价</u-button>
                            <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle" v-if="current == 2"  @click="onDetail(order)">查看评价</u-button>
                        </view>
                    </view>
                </mescroll-body>
            </view>
        </view>
        <loading-view v-if="loading"></loading-view>
	</view>
</template>

<script>
    import * as API_Order from '@/api/order.js'
    import * as API_Member from '@/api/members.js'
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
        mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
                tabsList: [{
                        name: '待评价'
                    }, {
                        name: '待追评'
                    }, {
                        name: '已评价'
                }],
                goodsPrice: '',
                current: 0,
                params: {
                    order_status: 'WAIT_COMMENT',
                    page_no: 1,
                    page_size: 10,
                    audit_status: '',
                    comments_type: '',
                    comment_status: '',
                },
                down: {
                    auto: false
                },
                orderList: [],
                customStyle: {
                    height: '60rpx',
                    fontSize: '28rpx',
                    margin: '0rpx 0rpx 0rpx 20rpx',
                    padding: '0rpx 30rpx',
                },
                loading: true
			};
		},
        onLoad() {
            uni.$on('back', () => {
            	this.change(this.current)
            });
        },
        filters: {
          // 状态过滤器
          auditStatus(status) {
            switch(status) {
              case 'WAIT_AUDIT': return '待审核';
              case 'PASS_AUDIT': return '审核通过';
              case 'REFUSE_AUDIT': return '审核拒绝'
            }
          }
        },
        methods:{
            change(index){
                //初始化参数
                this.orderList = []
                this.params = {
                    page_no: 1,
                    page_size: 10,
                    order_status: 'WAIT_COMMENT',
                }
                if(index == 1){
                    this.params = {
                        page_no: 1,
                        page_size: 10,
                        audit_status: 'PASS_AUDIT',
                        comments_type: 'INITIAL',
                        comment_status: 'WAIT_CHASE',
                    }
                }else if(index == 2){
                    this.params = {
                        page_no: 1,
                        page_size: 10,
                        audit_status: '',
                        comments_type: '',
                        comment_status: 'FINISHED',
                    }
                }
                this.current = index;
                this.mescroll.resetUpScroll(true)
            },
            loadData(){

                console.log(this.orderList);
                if(this.current == 0){
                    API_Order.getOrderList(this.params).then(res => {
                        this.loading = false;
                        this.orderList = this.orderList.concat(res.data);
                        this.mescroll.endBySize(res.data.length, res.data_total);
                    })
                } else {
                    API_Member.getWaitAppendComments(this.params).then(res => {
                        this.loading = false;
                        this.orderList = this.orderList.concat(res.data);
                        this.mescroll.endBySize(res.data.length, res.data_total);
                    })
                }
            },
            //上拉加载数据
            upCallback (page){
                this.params.page_no = page.num;
                this.loadData();
            },
            //下拉刷新
            downCallback(){
                this.change(this.current);
            },
            //跳转到店铺首页页
            onSellerDetail(sellerId,sellerName) {
                const _shopInfo = {
                    shop_id: sellerId,
                    shop_name: sellerName,
                    shop_logo: '',
                    tabNum: 0,
                };
                uni.navigateTo({
                    url: '/pages/shop/shop'+this.$u.queryParams(_shopInfo, true, 'indices'),
                })
            },
            //查看物流
            onExpress(order_sn) {
                uni.navigateTo({
                    url: '/order-module/order/evaluation?order_sn='+order_sn
                })
            },
            //评价
            onComment(order_sn,sku_list) {
                uni.navigateTo({
                    url: `/order-module/order/evaluation?order_sn=${order_sn}&sku_list=${encodeURIComponent(JSON.stringify(sku_list))}`
                })
            },
            addEvaluation(order){
                this.$u.route('/mine-module/add-evaluation', {
                	order_sn: order.order_sn,
                	sku_id: order.sku_id
                });
            },
            onDetail(order){
                this.$u.route('/mine-module/evaluation-detail', {
                	comment_id: order.comment_id,
                });
            }
        }
	}
</script>

<style lang="scss">
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
    }
    .swiper-box {
        flex: 1;
        height: 90%;
        .order-list-view {
            margin: 20rpx;
            background-color: #FFFFFF;
            border-radius: 10rpx;
            .order-header {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 20rpx 20rpx;
                .order-sn {
                    font-size: 29rpx;
                    font-weight: bold;
                }
                .order-status {
                    color: #ff5000;
                    font-weight: 500;
                }
            }
            .audit-status {
                display: flex;
            }
            .goods-list-view {
                padding: 0rpx 20rpx;
            }
            .order-price-view {
                padding-right: 20rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
                .order-total-price {
                    color: #82848a;
                    margin-left: 10rpx;
                }
                .order-pay-price {
                    font-size: 33;
                    font-weight: 600;
                    margin-left: 8rpx;
                }
            }
            .order-footer {
                padding: 20rpx;
            }
        }
    }
</style>
